<template>
	<div class="toast"
	     :style="iconClass?iconWindow:''"
	     v-show="show">
		<i v-if="iconClass"
		   class="iconfont"
		   :class="[iconClass,type==='loading'?'toast-loading':'']"></i>
		<div class="toast-content"
		     v-html="text"></div>
	</div>
</template>
<script>
export default {
  props: {
    type: String,
    show: {
      type: Boolean,
      default: false,
    },
    icon: String,
    text: String,
  },
  computed: {
    iconClass() {
      switch (this.type) {
        case 'tip':
          return 'icon-info';
        case 'success':
          return 'icon-correct';
        case 'fail':
          return 'icon-close';
        case 'loading':
          return 'icon-spinner2';
        default:
          return this.icon || '';
      }
    },
    iconWindow() {
      return {
        'min-width': '4rem',
        'min-height': '4rem',
      };
    },
  },
  data() {
    return {

    };
  },
  methods: {

  },
};
</script>
<style lang="less">
.toast {
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	padding-top: 10px;
	border-radius: 0.25rem;
	color: #ffffff;
	position: fixed;
	z-index: 3;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -40%);
	max-width: 80%;
	min-height: 1rem;
	max-height: 60%;
	overflow: hidden;
	overflow-y: auto;
}
.toast .iconfont {
	display: block;
	font-size: 2rem;
}
.toast-content {
	margin: 0px 15px 10px 15px;
	word-break: break-all;
}
.toast-loading {
	background: transparent !important;
	display: inline-block;
	animation: rotate 1s 0s linear infinite;
}
</style>
